<div class="userBind my-list">
  <div class="my-list-header">
    <app-left-line
      [text]="'用户绑定'"
    ></app-left-line>
    <!-- <span class="usageCode">用户编号: </span> -->
    <!-- <span class="address">地址地址地址</span> -->
    <button nz-button nzType="primary" (click)="add()">添加绑定</button>
  </div>

  <div class="content card">
    <nz-table #smallTable nzSize="small"
      [nzData]="data"
      [nzLoading]="dataLoading"
      [nzShowPagination]="false"
    >
      <thead>
        <tr>
          <th>序号</th>
          <th *ngFor="let col of cols | dealObj: 'value'">{{ col }}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of smallTable.data; let i = index">
          <td>{{ i + 0 }}</td>
          <td>{{ data['userBindUID'] }}</td>
          <td>{{ data['userName'] }}</td>
          <td>{{ data['address'] }}</td>
          <td>
            <nz-tag [nzColor]="state[data['state']]['color']">
              {{ state[data['state']]['value'] }}
            </nz-tag>
          </td>
          <td>
            <button nz-button nzType="link"
              nz-popconfirm
              nzPopconfirmTitle="确定解绑此用户编号吗?"
              nzPopconfirmPlacement="top"
              (nzOnConfirm)="unBind(data)"
            >解绑</button>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>
  <div class="my-pagination">
    <nz-pagination [nzTotal]="total" nzShowSizeChanger 
      [(nzPageSize)]="pageSize"
      [(nzPageIndex)]="pageIndex"
      (nzPageSizeChange)="getUserBindList()"
      (nzPageIndexChange)="getUserBindList()"
    >

    </nz-pagination>
  </div>
</div>
